<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,
        body {
            width: 100%;
            margin: 0;
            padding: 0;
            height: 100%;
            background-color: black;
        }
        svg {
            max-width: 100%;
            max-height: 100%;
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
<svg id="transporter" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 682 510" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>

        <pattern id="transporterRoom" patternUnits="userSpaceOnUse" width="682" height="510">
            <image xlink:href="../img/transporterRoom.jpg" x="0" y="0" width="682" height="510" />
        </pattern>

        <pattern id="glitter" patternUnits="userSpaceOnUse" width="289" height="538" x="-100" y="-100">
            <image xlink:href="../img/glitter.gif" x="0" y="0" width="289" height="538" />
        </pattern>

        <pattern id="uhura" patternUnits="userSpaceOnUse" width="89" height="238">
            <image xlink:href="../img/uhura.jpg" x="0" y="0" width="89" height="238" />
        </pattern>

        <filter id="heavyBlur" x="0" y="0">
            <feGaussianBlur in="SourceGraphic" stdDeviation="12" />
        </filter>

        <filter id="lightBlur" x="0" y="0">
            <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
        </filter>

        <linearGradient id="transporterGradient">
            <stop offset="0" stop-color="white" stop-opacity=".6" />
            <stop offset=".5" stop-color="white" stop-opacity="1" />
            <stop offset="1" stop-color="white" stop-opacity=".6" />
        </linearGradient>


        <mask id="uhuraMaskBlurred">
            <path fill="url(#transporterGradient)" filter="url(#heavyBlur)" d="m 54.918945,230.19988 c -2.106625,-0.24495 -3.152596,-1.53164 -5.690425,-7 -2.823428,-6.08375 -3.161288,-7.89538 -3.673925,-19.69988 -0.626596,-14.42862 -1.499138,-19 -3.626542,-19 -1.171557,0 -1.47718,3.09426 -1.70157,17.2274 -0.240145,15.12551 -0.484162,17.33918 -2,18.14357 C 35.97675,221.06481 19.871112,221.71821 18.25,220.68141 17.5625,220.24172 17,218.29684 17,216.35945 17,211.61741 10.248398,174.95549 8.4215852,169.77775 7.0774275,165.968 7.169342,164.6363 9.6263823,152.32204 L 12.286353,138.99072 9.5296661,131.74536 C 4.5045796,118.538 5.0086144,91.078791 10.549204,76.202168 12.95485,69.742949 13.740203,68.657798 17.383589,66.758858 19.647615,65.578843 23.975,64.104118 27,63.481692 l 5.5,-1.131684 0.298004,-5.611321 C 33.061349,51.779974 32.571924,50.074315 28.589777,42.07291 24.664516,34.185808 24.047161,32.0709 23.801328,25.668855 23.544314,18.97561 23.763478,17.998879 26.255403,14.731792 30.948977,8.5781996 44.287987,6.0555043 51.789838,9.902678 c 6.582225,3.375562 8.568806,6.365952 9.028869,13.591111 0.387654,6.087989 0.107262,7.090262 -5.283511,18.886109 -7.412666,16.220063 -7.064574,17.076229 8.009998,19.701352 6.171264,1.074679 6.832791,1.455768 10.432736,6.010041 7.095057,8.97592 10.717611,25.190617 9.601171,42.975219 -0.364826,5.81159 -1.31403,13.01159 -2.109342,16 -2.088153,7.84633 -1.839573,10.77346 1.617435,19.04595 3.791715,9.07343 5.526746,24.77087 3.60053,32.57527 -1.12889,4.57389 -1.370747,4.82748 -4.882529,5.11934 -3.255835,0.2706 -3.884634,-0.06 -5.292588,-2.78269 -0.878781,-1.69938 -1.992198,-2.84601 -2.47426,-2.54808 -3.026271,1.87034 -5.117867,30.50266 -3.034718,41.54293 1.66104,8.80318 1.014793,9.70064 -7.307228,10.14782 -3.40802,0.18312 -7.357876,0.1979 -8.777456,0.0328 z M 67.947419,116.25 c 1.304013,-4.69553 1.353047,-9.25 0.09959,-9.25 -1.139119,0 -3.033588,6.38461 -3.041427,10.25 -0.008,3.96887 1.725576,3.37957 2.941842,-1 z"
                    />
        </mask>

        <mask id="uhuraMask">
            <path fill="white" filter="url(#lightBlur)" d="m 54.918945,230.19988 c -2.106625,-0.24495 -3.152596,-1.53164 -5.690425,-7 -2.823428,-6.08375 -3.161288,-7.89538 -3.673925,-19.69988 -0.626596,-14.42862 -1.499138,-19 -3.626542,-19 -1.171557,0 -1.47718,3.09426 -1.70157,17.2274 -0.240145,15.12551 -0.484162,17.33918 -2,18.14357 C 35.97675,221.06481 19.871112,221.71821 18.25,220.68141 17.5625,220.24172 17,218.29684 17,216.35945 17,211.61741 10.248398,174.95549 8.4215852,169.77775 7.0774275,165.968 7.169342,164.6363 9.6263823,152.32204 L 12.286353,138.99072 9.5296661,131.74536 C 4.5045796,118.538 5.0086144,91.078791 10.549204,76.202168 12.95485,69.742949 13.740203,68.657798 17.383589,66.758858 19.647615,65.578843 23.975,64.104118 27,63.481692 l 5.5,-1.131684 0.298004,-5.611321 C 33.061349,51.779974 32.571924,50.074315 28.589777,42.07291 24.664516,34.185808 24.047161,32.0709 23.801328,25.668855 23.544314,18.97561 23.763478,17.998879 26.255403,14.731792 30.948977,8.5781996 44.287987,6.0555043 51.789838,9.902678 c 6.582225,3.375562 8.568806,6.365952 9.028869,13.591111 0.387654,6.087989 0.107262,7.090262 -5.283511,18.886109 -7.412666,16.220063 -7.064574,17.076229 8.009998,19.701352 6.171264,1.074679 6.832791,1.455768 10.432736,6.010041 7.095057,8.97592 10.717611,25.190617 9.601171,42.975219 -0.364826,5.81159 -1.31403,13.01159 -2.109342,16 -2.088153,7.84633 -1.839573,10.77346 1.617435,19.04595 3.791715,9.07343 5.526746,24.77087 3.60053,32.57527 -1.12889,4.57389 -1.370747,4.82748 -4.882529,5.11934 -3.255835,0.2706 -3.884634,-0.06 -5.292588,-2.78269 -0.878781,-1.69938 -1.992198,-2.84601 -2.47426,-2.54808 -3.026271,1.87034 -5.117867,30.50266 -3.034718,41.54293 1.66104,8.80318 1.014793,9.70064 -7.307228,10.14782 -3.40802,0.18312 -7.357876,0.1979 -8.777456,0.0328 z M 67.947419,116.25 c 1.304013,-4.69553 1.353047,-9.25 0.09959,-9.25 -1.139119,0 -3.033588,6.38461 -3.041427,10.25 -0.008,3.96887 1.725576,3.37957 2.941842,-1 z"
                    />
        </mask>

        <mask id="console">
            <path style="fill:white" d="m 219.96951,407.89689 2.14954,-80.60772 35.4674,0.35825 0.71651,-8.59815 26.86924,0.35825 0,8.2399 88.48937,0.71652 0.71651,-7.88165 26.22945,-0.63979 0.43498,8.11179 36.15857,7.2e-4 0.23015,97.13819 z" />
        </mask>


    </defs>

    <rect width="682" height="510" fill="url(#transporterRoom)" />
    <g transform="translate(360,105)">
        <rect id="uhuraPane" width="89" height="238" fill="url(#uhura)" mask="url(#uhuraMask)" opacity="1" onpad="true" />
        <rect id="glitterPane" width="89" height="238" fill="url(#glitter)" mask="url(#uhuraMaskBlurred)" opacity="0" />
    </g>
    <rect width="682" height="510" fill="url(#transporterRoom)" mask="url(#console)" />

    <g onclick="transport()" transform=" translate(20, 298) scale(.25,.25)">
        <rect id="transporterColorBlock" fill="yellow" style="fill-opacity:1;
        stroke:#000000;stroke-opacity:1;stroke-width:20;stroke-miterlimit:4;stroke-dasharray:none;stroke-linejoin:round" width="680" height="780" x="10" y="-10" />
        <path style="fill:#000000;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1" d="M 350.09375 20.90625 L 132.875 206.03125 L 207.125 206.03125 L 207.125 508.46875 L 132.875 508.46875 L 350.09375 673.4375 L 566.375 508.46875 L 490.3125 508.46875 L 490.3125 206.03125 L 566.375 206.03125 L 350.09375 20.90625 z M 350.09375 107.96875 C 361.92184 107.96875 373.63281 112.00609 373.4375 120.09375 C 373.14342 136.27502 368.78125 167.0625 368.78125 167.0625 C 382.61996 168.92633 395.19636 174.62472 407.8125 180.15625 C 412.42712 194.90534 416.12754 209.86664 419.28125 224.9375 L 280.25 224.9375 C 283.40371 209.86664 287.10413 194.90534 291.71875 180.15625 C 304.33489 174.62472 316.91129 168.92633 330.75 167.0625 C 330.75 167.0625 326.38783 136.27502 326.09375 120.09375 C 326.32046 112.00609 338.26566 107.96875 350.09375 107.96875 z M 279.28125 229.625 L 420.25 229.625 C 422.34836 240.02844 424.20078 250.48659 425.9375 260.96875 L 273.59375 260.96875 C 275.33047 250.48659 277.18289 240.02844 279.28125 229.625 z M 272.625 266.96875 L 426.90625 266.96875 C 428.18787 274.8983 429.43093 282.83666 430.65625 290.78125 L 429.90625 295.65625 L 399.5625 295.65625 L 396.1875 277.5625 L 391.21875 295.375 C 391.22835 295.46884 391.24 295.56245 391.25 295.65625 L 308.28125 295.65625 C 308.29075 295.56241 308.3025 295.4688 308.3125 295.375 L 303.34375 277.5625 L 299.96875 295.65625 L 269.625 295.65625 L 268.875 290.78125 C 270.10032 282.83666 271.34338 274.8983 272.625 266.96875 z M 270.53125 301.59375 L 298.875 301.59375 L 294.03125 327.53125 L 274.5 327.53125 L 270.53125 301.59375 z M 307.6875 301.59375 L 391.84375 301.59375 C 392.68933 310.24141 393.43198 318.88355 394.125 327.53125 L 305.40625 327.53125 C 306.09867 318.88308 306.84201 310.24188 307.6875 301.59375 z M 400.65625 301.59375 L 429 301.59375 L 425.03125 327.53125 L 405.5 327.53125 L 400.65625 301.59375 z M 275.8125 336 L 292.46875 336 L 289.03125 354.46875 L 278.71875 354.9375 L 275.8125 336 z M 304.75 336 L 394.8125 336 C 395.35039 343.17707 395.82937 350.35414 396.28125 357.53125 L 303.28125 357.53125 C 303.73271 350.35414 304.21274 343.17708 304.75 336 z M 407.0625 336 L 423.71875 336 L 420.8125 354.9375 L 410.5 354.46875 L 407.0625 336 z M 302.65625 367.59375 L 396.90625 367.59375 C 397.29221 374.25162 397.64099 380.90443 397.96875 387.5625 L 301.59375 387.5625 C 301.92132 380.90443 302.27059 374.25162 302.65625 367.59375 z M 301.03125 399 L 341.34375 399 C 340.54595 405.36218 339.71072 411.6119 338.84375 417.78125 L 300.25 417.78125 C 300.4934 411.51747 300.75004 405.26348 301.03125 399 z M 358.21875 399 L 398.53125 399 C 398.81258 405.26348 399.06903 411.51747 399.3125 417.78125 L 360.71875 417.78125 C 359.8525 411.6119 359.01641 405.36218 358.21875 399 z M 299.84375 429.03125 L 337.21875 429.03125 C 336.47323 434.03916 335.7175 438.99434 334.9375 443.90625 L 299.34375 443.90625 C 299.50664 438.94574 299.66563 433.99162 299.84375 429.03125 z M 362.34375 429.03125 L 399.71875 429.03125 C 399.8969 433.99162 400.05584 438.94574 400.21875 443.90625 L 364.625 443.90625 C 363.84614 438.99434 363.08843 434.03916 362.34375 429.03125 z M 298.9375 456.75 L 332.8125 456.75 C 331.69859 463.45458 330.55763 470.08945 329.40625 476.6875 L 298.34375 476.6875 C 298.53764 470.04316 298.73235 463.39463 298.9375 456.75 z M 366.71875 456.75 L 400.625 456.75 C 400.83016 463.39463 401.02486 470.04316 401.21875 476.6875 L 370.125 476.6875 C 368.97429 470.08943 367.83083 463.45471 366.71875 456.75 z M 297.8125 495 L 326.15625 495 C 325.37342 499.37688 324.59751 503.75523 323.8125 508.125 L 297.40625 508.125 C 297.53544 503.75157 297.68595 499.37402 297.8125 495 z M 373.34375 495 L 401.75 495 C 401.87655 499.37402 402.02706 503.75157 402.15625 508.125 L 375.6875 508.125 C 374.90074 503.75595 374.12654 499.37636 373.34375 495 z M 296.84375 527.625 L 320.3125 527.625 C 319.72303 530.9435 319.14641 534.29171 318.5625 537.625 L 296.5 537.625 C 296.61166 534.28923 296.73824 530.96212 296.84375 527.625 z M 379.21875 527.625 L 402.71875 527.625 C 402.82426 530.96212 402.95084 534.28923 403.0625 537.625 L 380.96875 537.625 C 380.38458 534.29179 379.81045 530.94339 379.21875 527.625 z M 295.46875 566.03125 L 313.59375 566.03125 C 310.66768 575.89344 300.5631 572.29127 295.46875 566.34375 C 295.47275 566.23976 295.46475 566.13523 295.46875 566.03125 z M 385.9375 566.03125 L 404.09375 566.03125 C 404.09775 566.13523 404.08975 566.23976 404.09375 566.34375 C 398.9994 572.29127 388.86691 575.89344 385.9375 566.03125 z "
              id="path3935" />

        <text id="transporterMsg" x="350" y="730" text-anchor="middle" font-family="monospace" font-size="54">ACTIVATE TRANSPORTER</text>

    </g>

</svg>
</body>
</html>

<script>
    function transport() {
        //TODO button color easing
        var glitter = document.getElementById('glitterPane');
        var uhura = document.getElementById('uhuraPane');
        var transporterColorBlock = document.getElementById('transporterColorBlock');
        var transporterMsg = document.getElementById('transporterMsg');
        var animationStop;

        if (uhura.onpad === undefined) {
            uhura.onpad = true;
        }

        if (uhura.inPatternBuffer === undefined) {
            uhura.inPatternBuffer = false;
        }

        if (uhura.onpad) {
            animationStop = 0;
        } else {
            animationStop = 360;
        }
        var piFract = Math.PI / 180;

        function transporterColor() {

            var key = (animationStop / 8) % 360;
            var redAdjust = Math.abs(((Math.cos(key) + 1) * .5) - 1) * 100;
            return 'rgba(' + Math.ceil(255 - redAdjust) + ',0,0,1)';

        }

        function transporterComplete() {
            transporterColorBlock.setAttribute('fill', '#0f9f00');
            transporterMsg.innerHTML = "TRANSPORT COMPLETE";
            setTimeout(function() {
                clearPatternBuffer()
            }, 2500);
        }

        function clearPatternBuffer() {
            transporterColorBlock.setAttribute('fill', 'yellow');
            transporterMsg.innerHTML = "ACTIVATE TRANSPORTER";
            uhura.inPatternBuffer = false;
        }

        function transportDown() {
            animationStop++;
            var adjusted = Math.abs(((Math.cos(animationStop * piFract) + 1) * .5) - 1);
            glitter.setAttribute('opacity', adjusted);
            transporterColorBlock.setAttribute('fill', transporterColor());

            if (animationStop <= 180) {
                uhura.setAttribute('opacity', (1 - adjusted));
            }
            if (animationStop < 360) {
                setTimeout(function() {
                    transportDown();
                }, 16);
            } else {
                transporterComplete()
                uhura.onpad = false

            }
        }

        function transportUp() {

            animationStop--;
            var adjusted = Math.abs(((Math.cos(animationStop * piFract) + 1) * .5) - 1);
            glitter.setAttribute('opacity', adjusted);
            transporterColorBlock.setAttribute('fill', transporterColor());
            if (animationStop <= 180) {
                uhura.setAttribute('opacity', (1 - adjusted));
            }
            if (animationStop > 0) {
                setTimeout(function() {
                    transportUp();
                }, 16);
            } else {
                transporterComplete()
                uhura.onpad = true;

            }
        }

        function doTransport() {
            if (!uhura.inPatternBuffer) {
                uhura.inPatternBuffer = true;
                transporterMsg.innerHTML = "TRANSPORT IN PROGRESS";
                if (uhura.onpad) {
                    transportDown();
                } else {
                    transportUp();
                }
            }

        }

        doTransport();

    }
</script>